<template>
  <div id="rich"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
let myRich = null;
let myEchart = null;
onMounted(() => {
  myRich = document.getElementById("rich");
  myEchart = echarts.init(myRich);
  let option = {
    color: ['red', 'yellow', 'blue'],
    legend: {   
    },
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sta", "Sun"],
    },
    yAxis: {},
    series: [
      {
        name:'mark',
        stack: "all",
        type: "bar",
        data: [10, 20, 23, 34, 25],
        // 激活
        emphasis: {
            itemStyle: {
                color: 'pink'
            },
            focus: 'series'  // none | data | series
        },
        // 失焦
        blur: {
            itemStyle: {
                color: 'black'
            },
        },
        select: {
            itemStyle: {
                borderWidth: 3
            }
        },
        selectedMode: 'series', // single | multiple | series
        z: 1,
        // 标记线
        // markLine: {
        //   data: [
        //     [
        //       {
        //         type: "max",
        //         name: '最大值到最小值'
        //       },
        //       {
        //         type: "min",
        //       },
        //     ],
        //     // {
        //     //     xAxis: 'Fri'
        //     // },
        //     // {
        //     //     yAxis: 85
        //     // },
        //     // 最大值、最小值、平均值、中位数
        //     // {
        //     //   type: "max",
        //     //   name: "最大值",
        //     // },
        //     // {
        //     //   type: "min",
        //     //   name: "最小值",
        //     // },
        //     // {
        //     //   type: "average",
        //     //   name: "平均值",
        //     // },
        //     // {
        //     //   type: "median",
        //     //   name: "中位数",
        //     // },
        //     // 具体的点
        //     // [
        //     //   {
        //     //     name: "line1",
        //     //     // 方式1: coord
        //     //     // coord: ["Mon", 10],
        //     //     // 方式2: x,y
        //     //     x: 100,
        //     //     y: 100,
        //     //   },
        //     //   {
        //     //     // coord: ["Wed", 80],
        //     //     x: 300,
        //     //     y: 20,
        //     //   },
        //     // ],
        //   ],
        // },
        // 标记点
        // markPoint: {
        //     data: [
        //         {
        //             // type: 'max',
        //             coord: ['Tue', 30],
        //             value: 30,
        //             name: '最大点'
        //         }
        //     ]
        // }
        // 标记区域
        // markArea: {
        //     z: 2,
        //     data: [
        //         [
        //             {
        //                 type: 'min',
        //                 name: '最小值到最大值'
        //             },
        //             {
        //                 type: 'max'
        //             }
        //         ]
        //     ]
        // }
      },
      {
        name: 'mary',
        stack: "all",
        type: "bar",
        z: 1,
        data: [43, 54, 25, 33, 85],
        // 激活
        emphasis: {
            itemStyle: {
                color: 'blue'
            },
            focus: 'series'  // none | data | series
        },
        // 失焦
        blur: {
            itemStyle: {
                color: 'black'
            },
        },
      },
    ],
  };
  myEchart.setOption(option);
});
onUnmounted(() => {
  myEchart.dispose(myRich);
});
</script>

<style lang="less" scoped>
#rich {
  width: 800px;
  height: 400px;
}
</style>
